<template>
  <view class="main">
    <view class="m-wrap">
      <image v-for="(item, index) in productSpecs" :key="index" :src="item.url" mode="widthFix" />
    </view>
    <view class="m-btn" @click="goBack"> 关闭 </view>
  </view>
</template>
<script>
import { getServiceIntroduce } from '@/api/service.js';
export default {
  data() {
    return {
      packageName: '',
      productSpecs: []
    };
  },
  onLoad(options) {
    // 获取服务包详情图片
    if (options) {
      this.initData(options.insurancePackageId);
    }
  },
  methods: {
    initData(insurancePackageId) {
      getServiceIntroduce(insurancePackageId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({
            title: '获取服务包详情图片报错'
          });
          return;
        }
        console.log('res:', res);
        // 获取服务包名称
        this.packageName = res.data[0].packageName;
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: this.packageName
        });
        // type 3 为头图，4为导航1  5为导航2  默认取第一保障产品的图片
        let productSpecs = res.data[0].insurancePackageSpecs;

        if (Array.isArray(productSpecs)) {
          // 按照type的大小进行过滤排序
          productSpecs = productSpecs
            .filter((item) => {
              return item.type === 3 || item.type === 4 || item.type === 5;
            })
            .sort((cur, next) => {
              return cur.type - next.type;
            });
          console.log('productSpecs:', productSpecs);
          this.productSpecs = productSpecs;
        }
      });
    },
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .m-wrap {
    font-size: 0;
    image {
      width: 100%;
      object-fit: contain;
    }
  }
  .m-btn {
    margin: 40rpx auto;
    width: 700rpx;
    height: 88rpx;
    border: 1px solid rgba(0, 0, 0, 0);
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
    border-radius: 44rpx;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
  }
}
</style>
